<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>博客详情页</title>
    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/blog_detail.css">
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
    <!-- 引入 editor.md 的依赖 -->
    <link rel="stylesheet" href="editor.md/css/editormd.min.css" />
    <script src="editor.md/lib/marked.min.js"></script>
    <script src="editor.md/lib/prettify.min.js"></script>
    <script src="editor.md/editormd.js"></script>

</head>
<body>
    <div class="nav">
        <div class="flag">
            <img src="image/face2.png" alt="logo">
            <div class="title">我的博客系统</div>
        </div>

        <div class="page">
            <a href="blog_list.html">主页</a>
            <a href="blog_edit.html">写博客</a>
            <a href="logout">注销</a>
        </div>
    </div>

    <div class="container">
        <div class="left">
            <div class="card">
                <img src="image/face2.png" alt="face">
                <h3></h3>
                <a href="https://gitee.com/">gitee地址</a>
                <div class="conter">
                    <span>文章</span>
                    <span>分类</span>
                </div>
                <div class="conter">
                    <span>2</span>
                    <span>1</span>
                </div>
            </div>
        </div>
        <div class="right">
            <h3></h3>
            <div class="date"></div>
            <div id="content">
                <!-- <p>编程之路，道阻且长。Lorem ipsum dolor sit amet consectetur adipisicing elit. 
                    Obcaecati eaque sapiente tempore esse quia qui laborum cupiditate adipisci 
                    numquam doloribus voluptatibus, atque, aspernatur corrupti nemo error? 
                    Impedit molestiae fugiat soluta.
                </p>
                <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Rem voluptas 
                    nesciunt iure, aliquam suscipit pariatur cupiditate ipsum saepe hic ipsa 
                    earum perferendis iste maxime quidem labore harum quos illum impedit.
                </p>
                <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Repellat excepturi 
                    aut maxime ad omnis, voluptatem eaque quae voluptatum beatae nihil perferendis 
                    enim quaerat hic quasi voluptate aspernatur nisi provident molestias.
                </p>
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Impedit adipisci natus 
                    doloremque eveniet iure aperiam rem praesentium iste odit consequuntur fugiat sint 
                    commodi ducimus inventore, labore quasi eos aspernatur error!
                </p>
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Aspernatur hic, neque omnis nemo re
                    udiandae nihil incidunt necessitatibus sit libero. Porro distinctio voluptatum ipsa temporibus 
                    nulla enim dolor! Iusto, sit adipisci.
                </p> -->

                
            </div>

        </div>
    </div>

    <script src="checkLogin.js"></script>
    <script>
        // 调用函数
        getLoginStatus();

        function getAuthor () {
            $.ajax({
                type:"get",
                url:"user"+ location.search,
                success:function(body) {
                    let userName = document.querySelector(".card h3");
                    userName.innerHTML = body.username;
                }
            })

        }
        // 调用方法
        getAuthor();

        function getBlog() {
            $.ajax({
                type:"get",
                // location.search是用于获取当前页面 URL 的查询字符串部分
                url:"blog"+ location.search,
                success: function(body) {
                    // 设置博客的标题
                    let h3 = document.querySelector('.right h3');
                    h3.innerHTML = body.title;
                    // 设置发布时间
                    let dateDiv = document.querySelector('.right .date');
                    dateDiv.innerHTML = body.postTime;
                    // 设置正文. 正文内容应该是 markdown 格式的数据. 
                    // 此处要显示的应该是渲染过的 markdown 的内容, 而不是 markdown 的原始字符串. 
                    // 第一个参数, 是一个 html 元素的 id, 接下来渲染的结果会放到对应的 元素中. 
                    editormd.markdownToHTML('content', {markdown: body.content});
                }

            })
        }
        // 调用方法
        getBlog();
                
    </script>
</body>
</html>